<template>
  <div class="sales-amount">
    <div class="time" @click="showPopup = true">
      <p>
        <span>{{selectedDate}}</span>
        <icon name="arrow-down" size="0.8rem" />
      </p>
    </div>
    <div class="total">
      <div>
        <p class="text">总收益</p>
        <span class="price">￥</span>
        <span class="price">{{detail.curEarn?detail.curEarn: '0.00'}}</span>
      </div>
    </div>

    <div class="total-part">
      <div>
        <p>利润</p>
        <p>￥{{detail.profit?detail.profit: '0.00'}}</p>
      </div>
      <div>
        <p>奖金</p>
        <p>￥{{detail.bonus?detail.bonus: '0.00'}}</p>
      </div>
      <div>
        <p>销售折扣</p>
        <p>￥{{detail.saleDiscount?detail.saleDiscount: '0.00'}}</p>
      </div>
    </div>

    <popup :show="showPopup" @onCancel="onCancel">
      <div>
        <datetime-picker
          v-model="date"
          type="year-month"
          show-toolbar
          :max-date="currentDate"
          :formatter="formatter"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </div>
    </popup>
  </div>
</template>

<script>
import popup from "../components/popup.vue";
import { DatetimePicker, Icon } from "vant";
let moment = require("moment");

export default {
  components: {
    popup,
    DatetimePicker,
    Icon
  },
  props: {
    salesDetail: {
      type: Object,
      default: {
        sales_discount: 0,
        profit: 0,
        balance: 0,
        curEarn: 0,
        name: "test",
        bonus: 0,
        saleMoney: 233
      }
    }
  },
  watch: {
    salesDetail: {
      handler(newVal) {
        this.detail = newVal;
      },
      deep: true
    }
  },
  data() {
    return {
      showPopup: false,
      currentDate: new Date(),
      selectedDate: "",
      detail: {},
      date: ""
    };
  },
  mounted() {
    let storeTime = localStorage.getItem("mysales_startDate");
    this.selectedDate = storeTime
      ? storeTime
      : moment(this.currentDate).format("YYYY-MM");
    this.date = storeTime ? moment(storeTime)._d : this.currentDate;
  },
  methods: {
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      }
      return value;
    },
    onConfirm(value) {
      this.showPopup = false;
      this.selectedDate = moment(value).format("YYYY-MM");
      this.$emit("onConfirm", this.selectedDate);
    },
    onCancel() {
      this.showPopup = false;
    }
  }
};
</script>

<style scoped>
.sales-amount {
  background-color: #fff;
}

.time {
  border-top: 1px solid var(--line-between-color);
  padding: 10px;
  display: flex;
  justify-content: center;
}

.time p {
  padding-left: calc(0.8rem + 3px);
  display: flex;
  align-items: center;
}

.time p span {
  padding-right: 3px;
}

.total {
  border-top: 1px solid var(--line-between-color);
  color: #565257;
  padding: 15px;
  display: flex;
  justify-content: center;
}

.total .price {
  font-size: 1.6rem;
  color: var(--money-up);
  font-weight: bold;
}

.total > div:first-child {
  /* text-align: left; */
  /* width: 33.3%; */
}

.text {
  font-size: 1rem;
}

.total-part > div > p:last-child {
  color: var(--money-up);
}

.total-part {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 100%;
  border-top: 1px solid var(--line-between-color);
  border-bottom: 1px solid var(--line-between-color);
}

.total-part > div {
  border-right: 1px solid var(--line-between-color);
  padding: 10px;
  /* display: flex; */
  /* font-size: 0.8rem; */
}
.total-part > div:last-child {
  border-right: 0;
}
</style>